<template>
    <div v-loading="!sliders.length" element-loading-background="rgba(122, 122, 122, 0.8)" element-loading-text="Loading...">
        <div class="navbar-fixed-top" style="position: sticky;top: 0;background: white; z-index: 1">
            <myHeader></myHeader>
            <tab></tab>
        </div>

        <div class="recommend"  >
            <carousel :sliders="sliders"></carousel>
            <h3>热门歌单推荐</h3>
            <br><br><br>
            <div class="recommendList">
                <div v-for="item in recommendList" class="item" :key="item.id">
                    <recommend-item :item="item"></recommend-item>
                </div>
            </div>
        </div>
    </div>


</template>

<script>
import {GetRecommend} from "@/service/recommend";
import Carousel from "@/components/carousel";
import {toRefs} from "vue";
import RecommendItem from "@/components/recommendItem";
import tab from "@/components/tab";
import myHeader from "@/components/header"

export default {
    name: 'recommend',
    components: {RecommendItem, Carousel,myHeader,tab},
    data(){
        return{
            sliders: [],
            recommendList: [],
        }
    },
    async created() {
        const result = await GetRecommend()
        this.sliders = result.sliders
        this.recommendList = result.albums
    },
    setup(){

    }
}
</script>

<style>
.recommend{

}
</style>
